<template>
	<view>
		<uni-popup ref="popup">
			<view class="notice-box">
				<view class="notice-title">
					设施农业用地办理申请填报须知
				</view>
				<view class="notice-content">
					<view class="notice-content-item">
						1、本表所填写内容应真实可靠，无虚假成份。填写者应对所填写内容的真实性负法律责任。
					</view>
					<view class="notice-content-item">
						2、设施农业用地线上办理申请以“数据多跑路，群众少跑腿”为中心思想，推动建立申请-备案-监管的数字化闭环管理机制。
					</view>
				</view>
				<view class="notice-footer">
					<view class="">
						<checkbox-group @change="change">
							<label>
								<checkbox :value="isCheck" style="transform:scale(0.7)"/><text></text>
							</label>
							我已阅读以上网报须知
						</checkbox-group>
					</view>
					<button class="notice-button" @click="buttonClicked">进入填报</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"NoticeAlert",
		data() {
			return {
				isCheck:'1',
				isSelect:false,
			};
		},
		methods: {
			show() {
				this.$refs.popup.open('center')
			},
			change(val){
				if (val.detail.value.length > 0) {
					this.isSelect = true
				} else{
					this.isSelect = false
				}
				
			},
			buttonClicked(){
				if (this.isSelect) {
					this.$refs.popup.close()
				} else{
					uni.showToast({
						title:'请确定是否已读须知',
						icon:'none'
					})
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.notice-box{
		background-image: url(../static/image/notice_bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 686rpx;
		height: 850rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		// padding: 80rpx;
	}
	.notice-title{
		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		line-height: 29rpx;
		margin: 80rpx ;
	}
	.notice-content{
		text-align: left;
		// margin: 80rpx;
		font-weight: 400;
		font-size: 31rpx;
		color: #555555;
		height: 55%;
		margin: 0rpx 60rpx;
		&-item{
			margin-top: 10rpx;
		}
	}
	.notice-footer{
		// margin-top: 50rpx;
	}
	.notice-button{
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		background: #2167CE;
		border-radius: 125rpx;
		margin-top: 10rpx;
	}
	
</style>